<template>
  <div class="app-container" style="width: 100%">
    <el-card class="box-card" style="margin-left: 10%;width: 80%">
      <div slot="header" style="font-size: larger;text-align: center" class="clearfix">
        <span>机井信息</span>
      </div>
      <div v-if="this.form.isFault=='否'">
        <el-result icon="success" title="正在运行" subTitle="">
        </el-result>
      </div>
      <div v-else>
        <el-result icon="error" title="报修中" subTitle="">
        </el-result>
      </div>
      <span>机井编号：{{this.form.wellNumber}}</span>
      <br><br><br>
      <span>乡   镇：{{this.form.town}}</span>
      <br><br><br>
      <span>详细地址：{{this.form.address}}</span>
      <br><br><br>
      <span v-if="this.form.ghyName">管护人：{{this.form.ghyName}}</span>
      <span v-else>管 护 人：无</span>
      <br><br><br>
      <span v-if="this.form.ghyTel">管护联系方式：{{this.form.ghyTel}}</span>
      <span v-else>管护联系方式：无</span>
      <br><br><br>
      <span>经   度：{{this.form.longitude}}</span>
      <br><br><br>
      <span>纬   度：{{this.form.latitude}}</span>
      <br><br><br>
      <span>立项年份：{{this.form.projectYear}}</span>
      <br><br><br>
      <br><br><br>
      <div style="text-align: center">
        <div v-if="form.isFault=='否'">
          <el-button type="success" @click="gotoReport()">报 修</el-button>
        </div>
        <div v-else>
          <el-button type="success" @click="gotoResult()">故障详情</el-button>
        </div>

<!--        <el-button type="warning">维 修 记 录</el-button>-->
      </div>
    </el-card>

  </div>
</template>

<script>
import {  getWell } from "@/api/farmwell/well";
import VueQr from 'vue-qr'

export default {
  name: "Well",
  components:{
    VueQr,
  },
  data() {
    return {
      qrcodeText:"",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 机井信息表格数据
      wellList: [],
      // 弹出层标题

      // 下载数据base64
      qrDownloadUrl: '',
      // 是否显示二维码弹出层
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getMessage();
  },
  methods: {



    /** 修改按钮操作 */ async getMessage() {
      // 获取查询参数
      const urlParams = new URLSearchParams(window.location.search);
      // 从查询参数中获取名为 'param' 的值
      const paramValue = urlParams.get('param');
      await getWell(paramValue).then(response => {
        this.form = response.data;
        console.log(this.form)
      });
    },
     async gotoReport() {
      const id=this.form.id
      this.$router.push({ name: 'report', params: { id } });
    },
     async gotoResult() {
      const id=this.form.id
      this.$router.push({ name: 'result', params: { id } });
    },

  }
};
</script>
